import React, { useEffect, useState } from "react";
import { PageHeader, Descriptions } from "antd";
import axios from "axios";
import moment from "moment";
import { AUDIT_LIST, PUBLISH_LIST } from "../../../util/const";

export default function NewsPreview(props) {
  const [newDetail, setNewDetail] = useState(null);
  useEffect(() => {
    axios
      .get(`/news/${props.match.params.id}?_expand=category`)
      .then(({ data }) => {
        setNewDetail(data);
      });
  }, [props.match.params.id]);
  const auditColorList = ["#333", "orange", "green", "red"];
  return (
    <div>
      {newDetail && (
        <PageHeader
          ghost={false}
          onBack={() => window.history.back()}
          title={newDetail.title}
          subTitle={newDetail.category.title}
        >
          <Descriptions size="small" column={3}>
            <Descriptions.Item label="创建者">
              {newDetail.author}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {moment(newDetail.createTime).format("YYYY-MM-DD HH:mm:ss")}
            </Descriptions.Item>
            <Descriptions.Item label="发布时间">
              {newDetail.publishTime
                ? moment(newDetail.publishTime).format("YYYY-MM-DD HH:mm:ss")
                : "-"}
            </Descriptions.Item>
            <Descriptions.Item label="区域">
              {newDetail.region}
            </Descriptions.Item>
            <Descriptions.Item label="审核状态">
              <span style={{ color: auditColorList[newDetail.auditState] }}>
                {AUDIT_LIST[newDetail.auditState]}
              </span>
            </Descriptions.Item>
            <Descriptions.Item label="发布状态">
              <span style={{ color: auditColorList[newDetail.publishState] }}>
                {PUBLISH_LIST[newDetail.publishState]}
              </span>
            </Descriptions.Item>
            <Descriptions.Item label="访问数量">
              {newDetail.view}
            </Descriptions.Item>
            <Descriptions.Item label="点赞数量">
              {newDetail.start}
            </Descriptions.Item>
            <Descriptions.Item label="评论数量">0</Descriptions.Item>
          </Descriptions>
          <div
            dangerouslySetInnerHTML={{ __html: newDetail.content }}
            style={{
              minHeight: "200px",
              marginTop: "20px",
              padding: "10px",
              border: "1px solid #f1f1f1"
            }}
          ></div>
        </PageHeader>
      )}
    </div>
  );
}
